<template>
  <div class="app">
    <h1>Vue3 自托管 TinyMCE 7</h1>
    <TinyEditor
      v-model="content"
      :init="editorConfig"
    />
    <div class="preview" v-html="content"></div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import TinyEditor from './TinyEditor.vue';

const content = ref('<h2>欢迎使用 TinyMCE 编辑器</h2><p>这是一个自托管的 TinyMCE 7 实例。</p>');

const editorConfig = ref({
  height: 500,
  menubar: true,
  plugins: [
    'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
    'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
    'insertdatetime', 'media', 'table', 'help', 'wordcount'
  ],
  toolbar: 'undo redo | blocks | ' +
    'bold italic forecolor | alignleft aligncenter ' +
    'alignright alignjustify | bullist numlist outdent indent | ' +
    'removeformat | help',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
  // 中文配置
  language: 'zh_CN',
  language_url: '/tinymce/langs/zh_CN.js',
  // 图片上传配置示例
  images_upload_handler: (blobInfo, progress) => new Promise((resolve, reject) => {
    const formData = new FormData();
    formData.append('file', blobInfo.blob(), blobInfo.filename());
    
    fetch('/api/upload', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => resolve(data.url))
    .catch(() => reject('上传失败'));
  })
});
</script>

<style>
.app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.preview {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
}
</style>